<template>
  <div>
    <SearchComp
      :formConfig="formConfig"
      :searchForm="searchForm"
      :searchData="searchData"
      :searchAction="searchAction"
    >
      <template v-slot:departmentName="{ item }">
        <el-select
          v-model="searchData.departmentName"
          :placeholder="item.placeholder"
          :clearable="item.clearable ? item.clearable : false"
          :ref="`selectBox${item.prop}`"
        >
          <el-option class="select-tree" :value="dataOrgTree">
            <div class="select-tree-box">
              <el-scrollbar style="height: 100%">
                <el-tree
                  class="orgTree elc-tree"
                  :data="dataOrgTree"
                  default-expand-all
                  node-key="id"
                  ref="tree"
                  highlight-current
                  :props="defaultProps"
                  @node-click="(data) => changeTree(data, item.prop)"
                ></el-tree>
              </el-scrollbar>
            </div>
          </el-option>
        </el-select>
      </template>
    </SearchComp>
  </div>
</template>

<script>
import SearchComp from "./searchComp.vue";
export default {
  data() {
    return {
      formConfig: {
        ref: "SearchCompRef",
      },
      searchForm: {
        changeMethod: () => this.changeMethod(),
        formData: [
          {
            type: "Input",
            label: "名称:",
            prop: "name",
            clearable: true,
            placeholder: "请输入名称",
          },
          {
            type: "Select",
            isSlot: true,
            label: "部门树:",
            prop: "departmentName",
            clearable: true,
            placeholder: "请选择",
          },
          {
            type: "Select",
            label: "事件:",
            prop: "eventName",
            clearable: true,
            multiple: true,
            placeholder: "请选择",
            options: [
              {
                label: "创建时间",
                value: "1",
              },
              {
                label: "创建时间2",
                value: "2",
              },
            ],
          },
          {
            type: "Cascader",
            label: "连级:",
            prop: "cascader",
            clearable: true,
            multiple: true,
            placeholder: "请选择",
            options: [
              {
                label: "创建时间",
                value: "1",
                children: [
                  {
                    label: "二级 1-1",
                    value: "1-1",
                    children: [
                      {
                        label: "三级 1-1-1",
                        value: "1-1-1",
                      },
                    ],
                  },
                ],
              },
              {
                label: "创建时间2",
                value: "2",
              },
            ],
          },
        ],
      },
      searchData: {
        name: "",
        departmentName: "",
        eventName: "",
        cascader: [],
      },
      searchAction: [
        {
          label: "重置",
          method: () => {
            console.log(
              "%c [  ]-42",
              "font-size:13px; background:pink; color:#bf2c9f;"
            );
          },
        },
      ],
      dataOrgTree: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  components: { SearchComp },
  methods: {
    changeMethod() {
      console.log(
        "%c [  ]-58",
        "font-size:13px; background:pink; color:#bf2c9f;"
      );
    },
    changeTree() {},
  },
};
</script>

<style></style>
